<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的预约</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<nav class="navbar">
			<div class="nav-logo">
				<img src="./static/imgs/logo.png" alt="市立助手">
				<span>市立预约平台</span>
			</div>
			<ul class="nav-links">
				<li><a href="index.html" class="active"><i class="fas fa-book-medical"></i>首页</a></li>
				<li><a href="chat.html"><i class="fas fa-comments"></i>智能预约</a></li>
				<li><a href="appointments.html"><i class="fas fa-calendar-check"></i> 预约管理</a></li>
				<li><a href="profile.html"><i class="fas fa-user"></i> 个人中心</a></li>
			</ul>
		</nav>

		<div class="container">
			<h1>我的预约记录</h1>

			<div class="appointment-actions">
				<button id="newAppointmentBtn" class="new-btn">
					<i class="fas fa-plus"></i> 新建预约
				</button>
			</div>

			<div class="appointment-list">
				<div class="filter-controls">
					<select id="filterStatus">
						<option value="all">全部状态</option>
						<option value="booked">已预约</option>
						<option value="completed">已完成</option>
						<option value="cancelled">已取消</option>
					</select>
					<input type="text" id="searchInput" placeholder="搜索科室或医生...">
				</div>
				<div id="appointmentsContainer">
					<!-- 预约列表将通过JS动态加载 -->
				</div>
			</div>
		</div>

		<!-- 预约表单模态框 -->
		<div id="appointmentModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<h2>新建预约</h2>
				<form id="addAppointmentForm" class="appointment-form">
					<div class="form-group">
						<label for="appointmentUsername">姓名:</label>
						<input type="text" id="appointmentUsername" name="username" required>
					</div>
					<div class="form-group">
						<label for="appointmentIdCard">身份证号:</label>
						<input type="text" id="appointmentIdCard" name="idCard" required>
					</div>
					<div class="form-group">
						<label for="department">科室:</label>
						<select id="department" name="department" required>
							<option value="">请选择科室</option>
							<option value="内科">内科</option>
							<option value="外科">外科</option>
							<option value="儿科">儿科</option>
							<option value="妇产科">妇产科</option>
						</select>
					</div>
					<div class="form-group">
						<label for="date">预约日期:</label>
						<input type="date" id="date" name="date" required>
					</div>
					<div class="form-group">
						<label for="time">预约时间:</label>
						<select id="time" name="time" required>
							<option value="">请选择时间段</option>
							<option value="上午">上午</option>
							<option value="下午">下午</option>
							<option value="晚上">晚上</option>
						</select>
					</div>
					<div class="form-group">
						<label for="doctor">医生:</label>
						<select id="doctor" name="doctorName" required>
							<option value="">请选择医生</option>
						</select>
					</div>
					<button type="submit" class="submit-btn">提交预约</button>
				</form>
			</div>
		</div>
		
		<script src="js/auth.js"></script>
		<script src="./js/appointments.js"></script>
	</body>
</html>